<template>
  <div style="width: 100%;">
    <t-form :data="formData" :rules="rules" ref="form" label-align="top">
      <t-form-item label="清单" name="params_data">
        <div style="width: 100%;">
          <t-table
            rowKey="index"
            class="table-class"
            :data="formData.params_data"
            :columns="columns"
            :stripe="stripe"
            :bordered="bordered"
            :hover="hover"
            :size="size"
            :table-layout="tableLayout ? 'auto' : 'fixed'"
            :showHeader="showHeader"
            cellEmptyContent="-"
            resizable
          >
            <template #sn="{col, colIndex, record, row, rowIndex }">
              <t-form-item :name="'params_data.' + rowIndex + '.sn'" style="padding-bottom: var(--td-comp-paddingTB-l);padding-top: var(--td-comp-paddingTB-l)" :rules='rules.sn' >
                <t-input v-model="row.sn" placeholder="请输入编号"></t-input>
              </t-form-item>
            </template>
            <template #title="{col, colIndex, record, row, rowIndex }">
              <t-form-item :name="'params_data.' + rowIndex + '.title'" style="padding-bottom: var(--td-comp-paddingTB-l);padding-top: var(--td-comp-paddingTB-l)" :rules='rules.title' >
                <t-input v-model="row.title" placeholder="请输入名称"></t-input>
              </t-form-item>
            </template>
            <template #num="{col, colIndex, record, row, rowIndex }">
              <t-form-item :name="'params_data.' + rowIndex + '.num'" style="padding-bottom: var(--td-comp-paddingTB-l);padding-top: var(--td-comp-paddingTB-l)" :rules='rules.num' >
                <t-input-number v-model="row.num" theme="column" style="width: 100%;" placeholder="请输入数量"></t-input-number>
              </t-form-item>
            </template>
            <template #option="{col, colIndex, record, row, rowIndex }">
              <t-space size="12px">
                <t-link theme="warning" class="opt-btn" variant="outline" @click="handleCopy(row)">复制</t-link>
                <t-link theme="danger" class="opt-btn" variant="outline" @click="handleDelete(row)">删除</t-link>
              </t-space>
            </template>
          </t-table>
          <div class="pt16" @click="handleCopy({ sn: '', title: '', num: '' })">
            <t-button>添加清单</t-button>
          </div>
        </div>
      </t-form-item>
    </t-form>
  </div>
</template>

<script>

export default {
  name: 'ProductInventory',
  props: {
    value: {
      type: String,
      default: ''
    },
  },
  data() {
    return {
      editorOption: {},
      formData: {
        params_data: [
          //{ sn: '', title: '', num: '' }
        ],  // 清单
      },
      rules: {
        //sn: [{required: true, message: '请输入编号', trigger: 'blur'},],
        //title: [{required: true, message: '请输入名称', trigger: 'blur'},],
        //num: [{required: true, message: '请输入数量', trigger: 'blur'},],
      },
      size: 'medium',
      tableLayout: false,
      stripe: false,
      bordered: false,
      hover: true,
      showHeader: true,
      columns: [
        {colKey: 'sn', title: '编号', width: 180},
        {colKey: 'title', title: '名称'},
        {colKey: 'num', title: '数量', width: 180},
        {colKey: 'option', title: '操作', fixed: 'right', width: 120},
      ],
    }
  },
  mounted() {
  },
  methods: {
    submit() {
      return  this.$refs.form.validate()
    },
    handleCopy(row) {
      this.formData.params_data.push({ ...row })
    },
    handleDelete(row) {
      this.formData.params_data = this.formData.params_data.filter(item => item !== row)
    }
  }
}
</script>

<style lang="less" >
.table-class {
  td {
    padding: 0 var(--td-comp-paddingLR-l);
  }
}
</style>
